<template>
  <div class="center">
    <el-form label-position="left" v-if="formComponents" style="width: 100%">
      <ul class="centerFormCmps">
        <draggable
          class="dargCmps"
          :group="{ name: 'people', pull: '' }"
          :animation="300"
          :list="formComponents"
          @add="handelFormCmpDragAdd"
          item-key="name"
        >
          <!-- (props.currentFormInfo as any).compProps -->
          <template #item="{ element }">
            <li
              class="dragComponent"
              :class="{ mouseOver: isActive == element.formItemId }"
              :index="element.newIndex"
              @click="queryRightInfo(element)"
            >
              <!--  :style="{ height: '100px' }" -->
              <div class="dragComponent_Btn">
                <el-button
                  :icon="DocumentCopy"
                  circle
                  size="small"
                  type="primary"
                  plain
                  @click="copyFormItem(element.formItemId)"
                ></el-button>
                <el-popconfirm
                  title="确定删除该组件?"
                  @confirm="delConfirm(element.formItemId)"
                >
                  <template #reference>
                    <el-button
                      :icon="Delete"
                      circle
                      size="small"
                      type="danger"
                      plain
                    ></el-button>
                  </template>
                </el-popconfirm>
              </div>

              <el-form :rules="rules">
                <form-cmp-ui :formComponent="element"></form-cmp-ui>
              </el-form>
            </li>
          </template>
        </draggable>
      </ul>
    </el-form>
  </div>
</template>
<script setup lang="ts">
//引入拖拽组件
import draggable from 'vuedraggable';
import { Delete, DocumentCopy } from '@element-plus/icons-vue';
import { ref, onBeforeUnmount, reactive } from 'vue';
import formCmpUi from './formCmpUi.vue';
import mitt from '@/utils/bus';
import { generateId, deepCopy } from '@/utils/util';
const bus: any = mitt;
const rules: any = reactive({});
const isActive = ref('');
const delConfirm = (id: string) => {
  formComponents.value = formComponents.value.filter(
    (s: any) => s.formItemId != id
  );
};

//currentFormInfo
//params[`stock${a}`] = sku_item[a].sku
const data = reactive({
  rightInfo: {},
  width: 100,
});
bus.on('formRightCompPropInfo', (currentData: any) => {
  if (currentData.FormItemId == isActive.value) {
    console.log('currentData:', currentData);
  }
});
const queryRightInfo = (info: any) => {
  info.dataTables = props.dataTables;

  isActive.value = info.formItemId;
  let compPropInfo = (props.currentFormInfo as any).compProps.filter(
    (s: any) => s.formItemId == info.formItemId
  )[0];
  let newInfo = { ...info, ...compPropInfo };
  bus.emit('rightInfo', newInfo);
};
const props = defineProps({
  formId: {},
  dataTables: {},
  currentFormInfo: {},
  //
});
const copyFormItem = (formItemId: string) => {
  let info: any = formComponents.value.filter(
    (s: any) => s.formItemId == formItemId
  )[0];
  let newInfo = deepCopy(info);
  newInfo.formItemId = generateId();
  (formComponents.value as any).push(newInfo);
};
let info: any = {};
let formComponents = ref([]);
bus.on('formDesignAddWidget', (currentInfo: any) => {
  (formComponents.value as any).push(currentInfo);
  formComponents.value = formComponents.value.filter(
    (s: any) => s.formItemId != null
  );
});
const initiallizeData = () => {
  (props.currentFormInfo as any).compProps.forEach((item: any) => {
    let info: any = {
      name: item.controlTitle,
      type: item.controlType,
      ...item,
    };
    (formComponents.value as any).push(info);
  });
};
initiallizeData();
//拖动新增组件
const handelFormCmpDragAdd = (evt: any) => {
  const newIndex = evt.newIndex; //获取darggable组件列表新增项的下标
  let formItemId = evt.item.attributes.formItemId.value;
  (data.rightInfo as any).Index = newIndex;
  // const formCmp = JSON.parse(JSON.stringify(formComponents.value[newIndex]));
  // if (!formCmp.formItemId) {
  //   //生成唯一id
  //   formCmp.formItemId =
  //     formCmp.type + '-' + Date.now() + '-' + Math.ceil(Math.random() * 99999);
  // }
  // (formComponents.value as any)[newIndex] = formCmp; //增加数据
};
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
  margin: 0;
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
// ul:first-child {

// }

//每个控件的div
.centerFormCmps {
  width: 100%;

  .dargCmps {
    width: 100%;
    .dragComponent {
      border: 1px dashed #e0e0e0;
      padding: 10px 10px;
      margin-bottom: 10px;
      position: relative;
      width: 100%;
      .dragComponent_Btn {
        display: none;
      }
    }
    .dragComponent:hover,
    .dragComponent:active,
    .mouseOver {
      border: 1px solid #409eff;
      background-color: #f3f9ff;
      .dragComponent_Btn {
        overflow: hidden;
        display: block;
        z-index: 9999;
        position: absolute;
        right: 10px;
        top: -10px;
        text-align: center;
      }
    }
  }
}
</style>
